<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>

<body>
    <div class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label required">科室名称</label>
            <div class="layui-input-block">
                <input type="text" name="departmentName" lay-verify="required" lay-reqtext="科室名称不能为空"
                    placeholder="请输入科室名称" value="" class="layui-input">
                <tip>填写科室名称。</tip>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">医生人数</label>
            <div class="layui-input-block">
                <input type="number" name="doctorId" lay-verify="required" lay-reqtext="请输入数字" placeholder="请输入医生人数"
                    value="" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label required">照片：</label>
            <input type="hidden" name="img" value="" id="img">
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test1">上传图片</button>
                    <div class="layui-upload-list">
                      <img style="width: 100px;" class="layui-upload-img" id="uploadImageShow">
                    </div>
                    <div style="width: 95px;">
                      <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                        <div class="layui-progress-bar" lay-percent=""></div>
                      </div>
                    </div>
                  </div>  
            </div>
        </div>



        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </div>
    <script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script>
        layui.use(['upload', 'element','form'], function () {
            var form = layui.form,
                layer = layui.layer,
                element = layui.element,
                upload = layui.upload,
                $ = layui.$;


            var xmlHttp = new XMLHttpRequest();
            xmlHttp.open("POST","http://localhost:8080/api/common/getUploadToken",false);
            xmlHttp.send();
            var token = JSON.parse(xmlHttp.responseText).data;

            var uploadInstt = upload.render({
                elem: '#test1',
                url: 'http://up.qiniu.com',
                data:{token:token},
                accept: "images",
                acceptMime: 'image/*',
                size: 1024,
                before: function(obj) {
                    obj.preview(function(index, file, result) {
                        $('#uploadImageShow').attr('src', result);
                    });

                    element.progress('demo', '0%');
                    layer.msg('上传中', {
                        icon: 16,
                        time: 0
                    });
                },
                done: function(res) {
                    console.log(res);
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }

                    let imageUrl = res.key;

                    $("#img").val(imageUrl);

                    $('#demoText').html('');
                },
                error: function() {
                    var demoText = $('#demoText');
                    demoText.html(
                        '<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'
                    );
                    demoText.find('.demo-reload').on('click', function() {
                        uploadInstt.upload;
                    });
                },

                progress: function(n, elem, e) {
                    element.progress('demo', n + '%');
                    if (n == 100) {
                        layer.msg('上传完毕', {
                            icon:  1
                        });
                    }
                }
            });

            //监听提交
            form.on('submit(saveBtn)', function (data) {

                $.ajax({
                    "url": "http://localhost:8080/api/department/addDepartmentData",
                    "data": data.field,
                    "success": function (result) {
                        if (result.code == 0) {
                            var iframeIndex = parent.layer.getFrameIndex(window.name);

                            parent.layer.close(iframeIndex);
                        } else {
                            layer.msg(result.msg);
                        }
                    }
                });

                return false;
            });

        });
    </script>
</body>

</html>